<template>
  <div class="item-one" ref="itemOne">
    <div class="title">
      <span>终端管理</span>
      <div>
        <!-- <el-dropdown>
           <el-button type="primary" style="margin-right: 10px;">
             商户进件<i class="el-icon-arrow-down el-icon--right"></i>
           </el-button>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item >汇付进件</el-dropdown-item>
             <el-dropdown-item>汇聚进件</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown> -->
        <el-button type="primary" @click="addterminal">添加终端</el-button>
        <el-button icon="el-icon-refresh"></el-button>
      </div>
    </div>
    <div class="container">
      <div class="screeningBox">
        <div class="leftBox">
          <div class="leftitem">
            <el-select
              class="servicelevel"
              v-model="conditions.servicelevel"
              placeholder="终端类型"
            >
              <el-option keys="1" label="静态码台卡" :value="3"></el-option>
              <el-option keys="2" label="智能POS" :value="1"></el-option>
              <el-option keys="2" label="收银插件" :value="2"></el-option>
              <el-option keys="2" label="收银盒子" :value="4"></el-option>
              <el-option keys="2" label="刷脸设备" :value="8"></el-option>
              <el-option keys="2" label="接口" :value="5"></el-option>
              <el-option keys="2" label="团餐设备" :value="11"></el-option>
              <el-option keys="2" label="缴费通" :value="12"></el-option>
            </el-select>
            <el-select
              class="servicelevel"
              v-model="conditions.state"
              placeholder="激活状态"
            >
              <el-option keys="1" label="已激活" value="1"></el-option>
              <el-option keys="2" label="未激活" value="0"></el-option>
              <el-option keys="2" label="已解绑" value="2"></el-option>
            </el-select>
            <el-input
              class="merchants wid40"
              @keyup.enter.native="soso"
              v-model.trim="conditions.qrCode"
              placeholder="二维码编号"
            ></el-input>
          </div>
          <div class="leftitem">
            <el-input
              class="merchants wid40"
              @keyup.enter.native="soso"
              v-model.trim="conditions.terminalModel"
              placeholder="终端型号"
            ></el-input>
            <el-input
              class="merchants wid40"
              @keyup.enter.native="soso"
              v-model.trim="conditions.terminalMac"
              placeholder="机器号"
            ></el-input>
          </div>
          <div class="leftitem">
            <el-input
              class="merchants"
              @keyup.enter.native="soso"
              v-model.trim="conditions.terminalNo"
              placeholder="终端号"
            ></el-input>
          </div>
        </div>
        <div class="rightBox">
          <div class="rightitem">
            <el-input
              class="merchants"
              @keyup.enter.native="soso"
              v-model.trim="conditions.merchantsno"
              placeholder="商户号/商户名/商户简称"
            ></el-input>
          </div>
          <div class="rightitem">
            <el-input
              class="merchants"
              @keyup.enter.native="soso"
              v-model.trim="conditions.shopno"
              placeholder="门店号/门店名"
            ></el-input>
          </div>
          <div class="rightitem">
            <el-button icon="el-icon-search" type="primary" @click="soso"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" type="primary" @click="reset"
              >重置</el-button
            >
          </div>
        </div>
      </div>

      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="merchantarr"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="tableHeaderColor"
          v-loading="loading"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column
            align="center"
            type="index"
            label="序号"
          ></el-table-column>
          <el-table-column
            label="终端号"
            align="center"
            width="150"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.terminalNo }}
                <i
                  class="el-icon-copy-document iconmove"
                  @click="copyterminalNoFunc(scope.row.terminalNo)"
                  v-clipboard:copy="copyterminalNo"
                  v-clipboard:success="onCopy"
                  v-clipboard:error="onError"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="二维码编号"
            align="center"
            width="150"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.qrcodeno }}
                <i
                  v-if="scope.row.qrcodeno"
                  class="el-icon-copy-document iconmove"
                  @click="copyqrcodenoFunc(scope.row.qrcodeno)"
                  v-clipboard:copy="copyqrcodeno"
                  v-clipboard:success="onCopy"
                  v-clipboard:error="onError"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="merchantName"
            width="260"
            align="center"
            label="所属商户/门店"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.merchantName
                }}<span v-if="scope.row.shopName">/</span
                >{{ scope.row.shopName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="merchantShortName"
            align="center"
            label="商户简称"
          ></el-table-column>
          <el-table-column
            prop="typeName"
            align="center"
            label="终端类型"
            width="115"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.typeName }}</span>
              <img
                class="code_img"
                src="../../assets/img/codeicon.png"
                alt=""
                title="预览"
                v-if="
                  (scope.row.typeName == '静态码台卡' &&
                    scope.row.activationStatus != 2) ||
                  scope.row.type == 12
                "
                @click="code_ma(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="terminalModel"
            align="center"
            label="终端型号"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            align="center"
            label="创建时间"
            width="140"
          ></el-table-column>
          <el-table-column
            prop="activationStatusName"
            align="center"
            width="90"
            label="状态"
          ></el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="140"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="setUpButton(scope.row)"
                >设置</el-button
              >
              <el-button
                type="text"
                size="small"
                :class="scope.row.threeBindingStatus == 0 ? 'red' : 'green'"
                v-if="
                  (userinfo.rolesId == 1 || userinfo.rolesId == 8) &&
                  ((scope.row.type == 8 &&
                    scope.row.terminalBrand == '新蜻蜓') ||
                    (scope.row.type == 4 && scope.row.terminalBrand == '如意'))
                "
                @click="threebindingbtn(scope.row)"
                >三绑定</el-button
              >
              <el-button
                type="text"
                size="small"
                v-if="(scope.row.type == 3 && scope.row.activationStatus == 2)  || (scope.row.type == 12 && scope.row.activationStatus == 2 )"
                @click="terminalupdate(scope.row)"
                >绑定</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="terminalupdate(scope.row)"
                v-if="
                  scope.row.activationStatus == 1 ||
                  scope.row.activationStatus == 0
                "
                >编辑</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="terminaldelete(scope.row.id)"
                >删除</el-button
              >
              <div
                style="display: inline-block; margin-left: 6px"
                v-if="scope.row.type == 3 || scope.row.type == 12"
              >
                <el-button
                  type="text"
                  size="small"
                  v-if="
                    scope.row.activationStatus == 1 ||
                    scope.row.activationStatus == 0
                  "
                  @click="unbundle(scope.row.id)"
                  >解绑</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="sizechange"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="combined"
          ></el-pagination>
        </div>
      </div>
      <br />
      <br />
      <!-- 添加终端 -->
      <el-dialog
        v-dialogDrag
        title="添加终端"
        :visible.sync="eqma"
        width="50%"
        :close-on-click-modal="false"
      >
        <el-form
          :model="tarminal"
          status-icon
          ref="tarminal"
          label-width="120px"
          class="demo-dynamic"
          :rules="tarminalFormRules" 
        >
          <el-form-item label="所属商户" prop="marid">
            <!-- <el-autocomplete
              v-model="tarminal.marid"
              :fetch-suggestions="allmerchants"
              @select="marid"
            ></el-autocomplete> -->
            <el-autocomplete
              v-model.trim="tarminal.marid"
              :fetch-suggestions="merchantslist"
              :debounce="300"
              placeholder="商户名"
              @select="marid"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="所属门店">
            <el-autocomplete
              v-model.trim="tarminal.shopName"
              :fetch-suggestions="allshops"
              :debounce="300"
              placeholder="门店名"
              @select="shopid"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="应用类型" prop="type">
            <el-select
              class="servicelevels"
              v-model="tarminal.type"
              placeholder="请选择"
              @change="type"
            >
              <el-option keys="1" label="静态码台卡" :value="3"></el-option>
              <el-option keys="2" label="智能POS" :value="1"></el-option>
              <el-option keys="2" label="收银插件" :value="2"></el-option>
              <el-option keys="2" label="收银盒子" :value="4"></el-option>
              <el-option keys="2" label="接口" :value="5"></el-option>
              <el-option keys="2" label="刷脸设备" :value="8"></el-option>
              <el-option keys="2" label="团餐设备" :value="11"></el-option>
              <el-option keys="2" label="缴费通" :value="12"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="缴费通模板" prop="sysTemplateId" v-if="tarminal.type == 12">
            <el-select
              v-model="tarminal.sysTemplateId"
              placeholder="请选择缴费通模板"
            >
              <el-option
                v-for="item in sysTemplateList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <div
            v-if="
              this.tarminal.type == 1 ||
              this.tarminal.type == 4 ||
              this.tarminal.type == 2 ||
              this.tarminal.type == 8 ||
              this.tarminal.type == 9
            "
          >
            <el-form-item label="品牌" >
              <el-select
                class="servicelevels"
                v-model="tarminal.terminalBrand"
                placeholder="请选择"
                @change="terminalBrand"
              >
                <el-option
                  v-for="(item, index) in terminalBrandlist"
                  :key="index"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="this.tarminal.type != 2" label="机器型号">
              <el-select
                class="servicelevels"
                v-model="tarminal.terminalModel"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in modellist"
                  :key="index"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="机器号">
              <el-input
                type="text"
                v-model.trim="tarminal.terminalMac"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              v-if="this.tarminal.type == 1 || this.tarminal.type == 4"
              label="银联终端号"
            >
              <el-input
                type="text"
                v-model.trim="tarminal.terminalNoUni"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="终端别名">
              <el-input
                type="text"
                v-model.trim="tarminal.alias"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              v-if="this.tarminal.type == 1 || this.tarminal.type == 4"
              label="二维码编号"
            >
              <el-input
                type="text"
                v-model.trim="tarminal.qrcodeno"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
          <div v-if="this.tarminal.type == 3 || tarminal.type == 12">
            <el-form-item label="二维码编号" prop="qrcodeno">
              <el-input
                type="text"
                v-model.trim="tarminal.qrcodeno"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="支付显示名称" prop="payName">
              <el-input
                type="text"
                v-model.trim="tarminal.payName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="logo">
              <el-upload
                list-type="picture-card"
                :action="urls"
                :headers="token"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
              >
                <img
                  style="width: 100%; height: 100%"
                  v-if="tarminal.payLogo"
                  :src="tarminal.payLogo"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="eqma = false">取消</el-button>
          <el-button type="primary" @click="terminalsave">确定</el-button>
        </span>
      </el-dialog>
      <!-- 修改终端 -->
      <el-dialog
        v-dialogDrag
        title="修改终端"
        :visible.sync="amend"
        width="50%"
        :close-on-click-modal="false"
      >
        <el-form
          :rules="tarminalFormRules" 
          :model="tarminalamend"
          status-icon
          ref="tarminalamend"
          label-width="110px"
          class="demo-dynamic"
        >
          <el-form-item label="所属商户" prop="marid">
            <el-autocomplete
              disabled
              v-model="tarminalamend.marid"
              :fetch-suggestions="merchantslist"
              :debounce="300"
              placeholder="商户名"
              @select="marid"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="所属门店">
            <el-autocomplete
              v-model="tarminalamend.shopnames"
              :fetch-suggestions="allshops"
              @select="shopid"
              disabled
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="应用类型" prop="type">
            <el-select
              class="servicelevels"
              v-model="tarminalamend.type"
              placeholder="请选择"
              disabled
            >
              <el-option keys="1" label="静态码台卡" :value="3"></el-option>
              <el-option keys="2" label="智能POS" :value="1"></el-option>
              <el-option keys="2" label="收银插件" :value="2"></el-option>
              <el-option keys="2" label="收银盒子" :value="4"></el-option>
              <el-option keys="2" label="接口" :value="5"></el-option>
              <el-option keys="2" label="刷脸设备" :value="8"></el-option>
              <el-option keys="2" label="团餐设备" :value="11"></el-option>
              <el-option keys="2" label="缴费通" :value="12"></el-option>
            </el-select>
          </el-form-item>
          <div
            v-if="
              tarminalamend.type == 1 ||
              tarminalamend.type == 4 ||
              tarminalamend.type == 2 ||
              tarminalamend.type == 8 ||
              tarminalamend.type == 9 
            "
          >
            <el-form-item label="品牌">
              <el-input
                type="text"
                :disabled="
                  tarminalamend.type == 1 ||
                  tarminalamend.type == 4 ||
                 tarminalamend.type == 2 ||
                  tarminalamend.type == 8 ||
                 tarminalamend.type == 9  
                "
                v-model="tarminalamend.terminalBrand"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item v-if="this.tarminalamend.type != 2" label="机器型号">
              <el-input
                type="text"
                :disabled="
                  tarminalamend.type == 1 ||
                  tarminalamend.type == 4 ||
                  tarminalamend.type == 2 ||
                  tarminalamend.type == 8 ||
                  tarminalamend.type == 9 
                "
                v-model="tarminalamend.terminalModel"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="机器号">
              <el-input
                type="text"
                :disabled="
                  tarminalamend.type == 1 ||
                  tarminalamend.type == 4 ||
                  tarminalamend.type == 2 ||
                  tarminalamend.type == 8 ||
                  tarminalamend.type == 9
                "
                v-model="tarminalamend.terminalMac"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              v-if="
                tarminalamend.type == 1 || tarminalamend.type == 4
              "
              label="银联终端号"
            >
              <el-input
                type="text"
                v-model.trim="tarminalamend.terminalNoUni"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              v-if="
               tarminalamend.type == 1 || tarminalamend.type == 4
                || tarminalamend.type == 12
              "
              label="二维码编号"
            >
              <el-input
                type="text"
                v-model.trim="tarminalamend.qrcodeno"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="终端别名">
              <el-input
                type="text"
                v-model.trim="tarminalamend.alias"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
          <div v-if="tarminalamend.type == 3 || tarminalamend.type == 12">
            <el-form-item label="缴费通模板" v-if="tarminalamend.type == 12" prop="sysTemplateId">
            <el-select
              v-model="tarminalamend.sysTemplateId"
              placeholder="请选择缴费通模板"
              :disabled="true"
            >
              <el-option
                v-for="item in sysTemplateList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
            <el-form-item label="二维码编号" prop="qrcodeno">
              <el-input
                type="text"
                v-model="tarminalamend.qrcodeno"
                autocomplete="off"
                :disabled="tarminalamend.activationStatus == 2 ? false : true"
              ></el-input>
            </el-form-item>
            <el-form-item label="支付显示名称" prop="payName">
              <el-input
                type="text"
                v-model="tarminalamend.payName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item class="photo" label="logo" prop="payLogo">
              <el-upload
                list-type="picture-card"
                :action="urls"
                :headers="token"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
              >
                <img
                  style="width: 100%; height: 100%"
                  v-if="tarminalamend.payLogo"
                  :src="tarminalamend.payLogo"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="amend = false">取消</el-button>
          <el-button type="primary" @click="terminalupdateok">确定</el-button>
        </span>
      </el-dialog>
      <!-- 设置 -->
      <el-dialog
        v-dialogDrag
        title="设置"
        :visible.sync="setupVisible"
        width="30%"
        :close-on-click-modal="false"
      >
        <el-form
          :model="setupData"
          status-icon
          ref="setupData"
          label-width="110px"
          class="demo-dynamic"
        >
          <el-form-item required label="渠道终端号 ">
            <el-input
              type="text"
              v-model="setupData.channelTerminalId"
              autocomplete="off"
              placeholder="请输入渠道终端号"
            ></el-input>
          </el-form-item>
          <el-form-item label="设备SN号">
            <el-input
              type="text"
              v-model="setupData.channelTerminalSn"
              autocomplete="off"
              placeholder="请输入设备SN号"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="setupVisible = false">取消</el-button>
          <el-button type="primary" @click="setUpConfirm">确定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title=""
        :visible.sync="dialogTableVisible"
        width="500px"
        :close-on-click-modal="false"
      >
        <el-tabs v-model="activeName" :stretch="true" @tab-click="handleClick">
          <el-tab-pane label="公众号台卡" name="first">
            <div class="gzh_ka">
              <div class="box_warp">
                <div class="box" ref="box">
                  <img v-if="oemFlag == 1" :src="oeminfo.cardImage" alt="" />
                  <img v-else src="../../assets/img/taika.png" alt="" />
                  <div id="qrcode1"></div>
                </div>
              </div>
              <el-button
                class="ka_btn"
                type="primary"
                plain
                @click="download_gzh"
                >下载</el-button
              >
            </div>
          </el-tab-pane>
          <el-tab-pane label="小程序台卡" name="second">
            <div class="xcx_ka">
              <div class="box_xcxp">
                <div class="box1" ref="box1">
                  <img v-if="oemFlag == 1" :src="oeminfo.cardImage" alt="" />
                  <img v-else src="../../assets/img/taika.png" alt="" />
                  <div id="qrcode2"></div>
                </div>
              </div>
              <el-button
                class="ka_btn"
                type="primary"
                plain
                @click="download_xcx"
                >下载</el-button
              >
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
      <!-- 三绑定 -->
      <el-dialog
        v-dialogDrag
        title="IOT设备三绑定"
        :visible.sync="threebinding"
        width="50%"
        :close-on-click-modal="false"
      >
        <el-form
          :model="bindinginfo"
          status-icon
          ref="tarminal"
          label-width="150px"
          class="demo-dynamic"
        >
          <el-form-item required label="商户支付宝PID">
            <el-input
              type="text"
              v-model.trim="bindinginfo.aliPid"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="aliMerchantType == 'indirect'"
            required
            label="支付宝间联smid"
          >
            <el-input
              type="text"
              v-model.trim="bindinginfo.aliSmid"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="aliMerchantType == 'indirect'"
            label="支付宝登录账号"
          >
            <el-input
              type="text"
              v-model.trim="bindinginfo.alipayAccount"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item required label="支付宝门店ID">
            <el-input
              type="text"
              v-model.trim="bindinginfo.aliShopId"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item required label="支付宝设备ID">
            <el-input
              type="text"
              v-model.trim="bindinginfo.aliDeviceId"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item required label="绑定状态">
            <div class="red" v-if="bindinginfo.threeBindingStatus == 0">
              未绑定
            </div>
            <div class="green" v-else-if="bindinginfo.threeBindingStatus == 1">
              已绑定
            </div>
          </el-form-item>
          <el-form-item required label="三绑定状态说明">
            <div
              v-if="
                bindinginfo.threeBindingStatus == 0 &&
                bindinginfo.threeBindingMsg
              "
            >
              {{ bindinginfo.threeBindingMsg }}
            </div>
          </el-form-item>
          <div style="text-align: center">
            <el-button type="primary" @click="check3Binds()"
              >绑定关系校验</el-button
            >
          </div>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="threebinding = false">取消</el-button>
          <el-button type="primary" @click="bingdingok()">绑定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getservice,
  terminallist,
  merchantlist,
  merchantall,
  shopall,
  terminalsave,
  terminaldelete,
  terminalupdate,
  terminalrelease,
  get3Bind,
  config3Bind,
  operationresult,
  operationapply,
  check3Bind,
  templateList,
  APIsetUpTerminal,
} from "@/api/api";
import "../../assets/js/jquery-qrcode";
import html2canvas from "html2canvas";
import { qrcanvas } from "qrcanvas";
export default {
  name: "item-one",
  data: function () {
    return {
      setupVisible: false,
      copyterminalNo: "",
      copyqrcodeno: "",
      userinfo: {},
      threebinding: false,
      activeName: "first",
      token: { token: sessionStorage.getItem("token") },
      tableData: [],
      cur_page: 1,
      cur_size: 10,
      multipleSelection: [],
      amend: false,
      servicearr: [],
      merchantarr: [],
      combined: 10,
      pageCount: "",
      eqma: false,
      loading: true,
      imageUrl: "",
      terminalupdateid: "",
      terminalBrandlist: [],
      tarminal: {
        payLogo: "",
        shopName: "",
      },
      tarminalamend: {
        payLogo: "",
      },
      setupData: {
        channelTerminalId: "",
        channelTerminalSn: "",
      },

      allmerchant: [],
      allshop: [],
      poslist: [{ name: "华智融" }, { name: "联迪" }],
      boxlist: [
        { name: "意锐" },
        { name: "新大陆" },
        { name: "如意" },
        { name: "招财宝" },
      ],
      liandi: [{ name: "联迪A8" }, { name: "富友联迪A8" }],
      pluginlist: [{ name: "意锐RC661" }],
      facelist: [{ name: "青蛙" }, { name: "新蜻蜓" }],
      groupDinner: [{ name: "高校团餐" }, { name: "政企团餐" }],
      qingwa: [{ name: "TZH-L1" }],
      xinqingting: [
        { name: "F6" },
        { name: "F4Plus" },
        { name: "F4A" },
        { name: "T1A" },
        { name: "T3B00" },
      ],
      gaoxiao: [{ name: "海马" }],
      yirui: [{ name: "RC661" }],
      huazhirong: [{ name: "9210" }],
      xindalu: [{ name: "ME50C" }],
      ruyi: [{ name: "RL2" }, { name: "AMX" }],
      zhaocaibao: [{ name: "P128" }],
      modellist: [],
      conditions: {
        servicelevel: "",
        merchantsno: "",
        shopno: "",
        qrCode: "",
        state: "",
        terminalNo: "",
        terminalModel: "",
        terminalMac: "",
      },
      sysTemplateList: [],
      dialogTableVisible: false,
      qrcodeno_tk: "",
      terminalURL: "",
      gzh_url: process.env.VUE_APP_BASE_URL + "/yfpay/qrpay/",
      xcx_url: process.env.VUE_APP_BASE_URL + "/minipay/",
      oeminfo: "",
      oemFlag: "",
      urls:
        process.env.VUE_APP_EXCEL_URL +
        "/product/v31/api/merchant/uploadfile/upload",
      bindinginfo: {},
      aliMerchantType: "",
      bingding3id: "",
      operationapplybtn: true,
      operationresultbtn: true,
      batchNo: "",
      tarminalFormRules:{
        marid:[{ required: true, message: '请选择所属商户', trigger: 'change' }],
        type:[{ required: true, message: '请选择应用类型', trigger: 'change' }],
        sysTemplateId:[{ required: true, message: '请选择缴费通模板', trigger: 'change' }],
        qrcodeno:[{ required: true, message: '请输入二维码编号', trigger: 'change' }],
        payName:[{ required: true, message: '请输入支付显示名称', trigger: 'change' }],
        payLogo:[{required: true, validator:(rule , value , callback)=>{
                        if(value){
                        callback();
                        }else{
                            callback(new Error('请上传logo！'))
                        }
                 } }],

      }
    };
  },
  created() {
    this.userinfo = JSON.parse(sessionStorage.getItem("userInfo"));
    this.$store.dispatch("getNewNum", 6);
    // console.log(this.$store.state.changableNum);
    // console.log(this.$store.state.showFooter);
    // console.log(this.$store.state.logininfo);
    this.merchantlist();
    this.initTemplateList();
    this.oeminfo = JSON.parse(sessionStorage.getItem("oeminfo"));
    this.oemFlag = sessionStorage.getItem("oemFlag");
  },
  methods: {
    setUpButton(item) {
      Object.assign(this.setupData, item);
      this.setupVisible = true;
      this.setupData.channelTerminalId = "";
      this.setupData.channelTerminalSn = "";
    },
    setUpConfirm() {
      console.log(this.setupData);
      if (!this.setupData.channelTerminalId) {
        this.$message({
          message: "请输入渠道终端号",
          type: "warning",
        });
      } else {
        APIsetUpTerminal(this.setupData).then((res) => {
          console.log(res);
          if (res.code == 200) {
             this.setupVisible = false;
            this.$message({
              message: "设置成功",
              type: "success",
            });
          }else{
            this.$message.error(res.message);
          }
        });
      }
    },
    //复制终端号
    copyterminalNoFunc(item) {
      this.copyterminalNo = item.replace(/^\s+|\s+$/g, "");
    },
    //复制二维码编号
    copyqrcodenoFunc(item) {
      this.copyqrcodeno = item.replace(/^\s+|\s+$/g, "");
    },
    onCopy: function (e) {
      this.$message({
        message: "复制成功",
        type: "success",
      });
      console.log("复制成功");
    },
    onError: function (e) {
      this.$message.error("复制失败");
      console.log("复制失败");
    },
    async initTemplateList() {
      const res = await templateList({ size: 9999, page: 1 });
      this.sysTemplateList = res.data;
    },
    handleAvatarSuccess(res, file) {
      // this.tarminal.$set('payLogo', res.data.filePath)

      if (res.code == 405) {
        sessionStorage.removeItem("token");
        this.$router.push("/login");
      } else if (res.code == 200) {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.tarminal.payLogo = res.data.filePath;
        this.tarminalamend.payLogo = res.data.filePath;
      } else {
        this.$message.error(res.message);
      }
    },
    //修改thead 背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
      }
    },
    // 刷新
    refresh() {
      this.$router.go({
        path: 0,
        query: {
          t: Date.now(),
        },
      });
    },
    // 分页导航
    handleCurrentChange(val) {
      this.cur_page = val;
      this.merchantlist();
      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    // 分页数量
    sizechange(val) {
      this.cur_size = val;
      this.merchantlist();

      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    //多选框
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    //  重置
    reset() {
      this.conditions = {
        servicelevel: "",
        merchantsno: "",
        shopno: "",
        qrCode: "",
        state: "",
        terminalNo: "",
        terminalMac: "",
      };
    },
    // 搜索
    soso() {
      this.loading = true;
      this.cur_page = 1;
      this.merchantlist();
    },
    // 打开添加中终端Box
    addterminal() {
      this.eqma = true;
      this.tarminal = {
        payLogo: "",
        shopName: "",
      };
      this.$refs.tarminal.clearValidate()
    },
    // 终端列表
    merchantlist() {
      // console.log(this.conditions)
      terminallist({
        page: this.cur_page,
        size: this.cur_size,
        type: this.conditions.servicelevel,
        activationStatus: this.conditions.state,
        qrcodeno: this.conditions.qrCode,
        keywords: this.conditions.merchantsno,
        searchwords: this.conditions.shopno,
        terminalNo: this.conditions.terminalNo,
        terminalModel: this.conditions.terminalModel,
        terminalMac: this.conditions.terminalMac,
      }).then((res) => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          this.merchantarr = res.data;
          this.combined = res.pageInfo.recordCount;
          this.pageCount = res.pageInfo.pageCount;
          this.loading = false;
        } else {
          this.$message.error(res.message);
          this.loading = false;
        }
      });
    },

    marid(item) {
      this.tarminal.merchantId = item.id;
      this.tarminal.shopName = "";
      // this.shopall();
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !==
          -1
        );
      };
    },
    // 获取商户列表初始化
    merchantslist(queryString, cb) {
      let sosolist = {};
      sosolist = {
        page: 1,
        size: 20,
        merchantName: this.tarminal.marid,
      };
      merchantlist(sosolist).then((res) => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.merchantarrlist = [];
          for (var i = 0; i < res.data.length; i++) {
            this.merchantarrlist.push({
              value: res.data[i].merchantName + " — " + res.data[i].merchantNo,
              id: res.data[i].id,
            });
          }
          let results = queryString
            ? this.merchantarrlist.filter(this.createFilter(queryString))
            : this.merchantarrlist;
          // 调用 callback 返回建议列表的数据
          cb(results);
        }
      });
    },
    // 查询门店
    allshops(queryString, cb) {
      // let allshope = this.allshop;
      let sosolist = {};
      sosolist = {
        page: 1,
        size: 20,
        merchantId: this.tarminal.merchantId,
        shopName: this.tarminal.shopName,
      };
      shopall(sosolist).then((res) => {
        console.log(res);
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.allshop = [];
          for (var i = 0; i < res.data.rows.length; i++) {
            this.allshop.push({
              value:
                res.data.rows[i].shopName + " — " + res.data.rows[i].shopNo,
              id: res.data.rows[i].id,
            });
          }
          let results = queryString
            ? this.allshop.filter(this.createFilter(queryString))
            : this.allshop;
          // 调用 callback 返回建议列表的数据
          cb(results);
        }
      });
    },
    shopid(item) {
      console.log(item);
      this.tarminal.shopCode = item.code;
      this.tarminal.shopName = item.value;
      this.tarminal.shopId = item.id;
    },
    // 通过商户获取门店
    shopall() {
      this.allshop = [];
      shopall({
        merchantId: this.tarminal.merchantId,
      }).then((res) => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          for (var i = 0; i < res.data.rows.length; i++) {
            this.allshop.push({
              value: res.data.rows[i].shopName,
              id: res.data.rows[i].id,
              code: res.data.rows[i].shopNo,
            });
          }
        }
      });
    },
    // 添加终端
    async terminalsave() {
      const valid =  await this.$refs.tarminal.validate()
      if(!valid) return
      // console.log(this.tarminal)
      terminalsave(this.tarminal).then((res) => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.eqma = false;
          this.tarminal = { payLogo: "" };
          this.merchantlist();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 删除终端
    terminaldelete(id) {
      this.$confirm("是否确定删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          terminaldelete({}, id).then((res) => {
            // console.log(res);
            if (res.code == 405) {
              sessionStorage.removeItem("token");
              this.$router.push("/login");
            } else if (res.code == 200) {
              this.$message({
                message: "已删除",
                type: "success",
              });
              this.merchantlist();
            } else {
              this.$message.error(res.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 修改终端
    terminalupdate(val) {
      this.terminalupdateid = val.id;
      this.amend = true;
      this.tarminalamend = {
        type: val.type,
        terminalBrand: val.terminalBrand,
        terminalModel: val.terminalModel,
        terminalMac: val.terminalMac,
        terminalNoUni: val.terminalNoUni,
        qrcodeno: val.qrcodeno,
        payName: val.payName,
        payLogo: val.payLogo,
        marid: val.merchantName,
        shopnames: val.shopName,
        shopName: val.shopName,
        activationStatus: val.activationStatus,
        shopId: val.shopId,
        alias: val.alias,
        sysTemplateId: val.sysTemplateId,
      };
    },
    // 修改终端ok
    async terminalupdateok() {
      const valid = await this.$refs.tarminalamend.validate()
      if(!valid) return

      terminalupdate(this.tarminalamend, this.terminalupdateid).then((res) => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.amend = false;
          this.merchantlist();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 解绑
    unbundle(id) {
      this.$confirm("是否确定解绑？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          terminalrelease({}, id).then((res) => {
            // console.log(res);
            if (res.code == 405) {
              sessionStorage.removeItem("token");
              this.$router.push("/login");
            } else if (res.code == 200) {
              this.$message({
                message: "解绑成功",
                type: "success",
              });
              this.merchantlist();
            } else {
              this.$message.error(res.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //显示预览弹框
    code_ma(v) {
      this.dialogTableVisible = true;
      this.activeName = "first";
      this.qrcodeno_tk = v.qrcodeno;
      var nog = "Nog:" + this.qrcodeno_tk;
      // var nox = "Nox:"+ this.terminalNo
      this.qrCdoe(nog, this.gzh_url);
      // this.qrCdoe2(nox,this.xcx_url)
    },
    handleClick(tab, event) {
      if (tab.name == "first") {
        var nog = "Nog:" + this.qrcodeno_tk;
        this.qrCdoe(nog, this.gzh_url);
      } else if (tab.name == "second") {
        var nox = "Nox:" + this.qrcodeno_tk;
        this.qrCdoe2(nox, this.xcx_url);
      }
    },
    qrCdoe(v, url) {
      var label = v;
      var url = url;
      $("#qrcode1").html("");
      this.$nextTick(() => {
        var qrcode = $("#qrcode1").qrcode({
          render: "canvas", //也可以替换为table
          size: 720,
          text: url + this.qrcodeno_tk,
          label: label,
          minVersion: 1, // version range somewhere in 1 .. 40
          maxVersion: 40,
          ecLevel: "H", //识别度  'L', 'M', 'Q' or 'H'
          radius: 0.1, // 0.0 .. 0.5
          quiet: 3, //边距
          mode: 2,
          fill: "#000", //二维码颜色
          background: "#ffff", //背景色
          mSize: 0.05, //图片大小
          mPosX: 0.5,
          mPosY: 0.99,
          fontname: "sans",
        });
      });
    },
    qrCdoe2(v, url) {
      var label = v;
      var url = url;
      $("#qrcode2").html("");
      var qrcode1 = $("#qrcode2").qrcode({
        render: "canvas", //也可以替换为table
        size: 720,
        text: url + this.qrcodeno_tk,
        label: label,
        minVersion: 1, // version range somewhere in 1 .. 40
        maxVersion: 40,
        ecLevel: "H", //识别度  'L', 'M', 'Q' or 'H'
        radius: 0.1, // 0.0 .. 0.5
        quiet: 3, //边距
        mode: 2,
        fill: "#000", //二维码颜色
        background: "#ffff", //背景色
        mSize: 0.05, //图片大小
        mPosX: 0.5,
        mPosY: 0.99,
        fontname: "sans",
      });
    },
    //下载
    download_gzh() {
      this.htmlCanvas(this.$refs.box, "公众号台卡");
    },
    download_xcx() {
      this.htmlCanvas(this.$refs.box1, "小程序台卡");
    },
    htmlCanvas(dom, t) {
      let that = this;
      let a = document.createElement("a");
      const loading = this.$loading({
        lock: true,
        text: "正在下载",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      var box = dom;
      var title = t;
      // {width:331,height:451,x:795,scale:2}
      html2canvas(box, { width: 332, height: 453, scale: 5 }).then(function (
        canvas
      ) {
        // console.log(canvas) //生成canvas画布
        // console.log(canvas.toDataURL()) //将canvas转为base64图片
        let dom = document.body.appendChild(canvas);
        dom.style.display = "none";
        a.style.display = "none";
        document.body.removeChild(dom);
        let blob = that.dataURLToBlob(dom.toDataURL("image/png"));
        a.setAttribute("href", URL.createObjectURL(blob));
        //这块是保存图片操作  可以设置保存的图片的信息
        a.setAttribute(
          "download",
          title + "[" + that.qrcodeno_tk + "]" + ".png"
        );
        document.body.appendChild(a);
        a.click();
        URL.revokeObjectURL(blob);
        document.body.removeChild(a);
        loading.close();
      });
    },
    //图片转换格式的方法
    dataURLToBlob(dataurl) {
      let arr = dataurl.split(",");
      let mime = arr[0].match(/:(.*?);/)[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
    // 应用类型
    type(val) {
      this.$set(this.tarminal, "terminalBrand", "");
      if (val == 1) {
        this.terminalBrandlist = this.poslist;
      } else if (val == 2) {
        this.terminalBrandlist = this.pluginlist;
      } else if (val == 4) {
        this.terminalBrandlist = this.boxlist;
      } else if (val == 8) {
        this.terminalBrandlist = this.facelist;
      } else if (val == 9) {
        this.terminalBrandlist = this.groupDinner;
      }
      this.$refs.tarminal.clearValidate()
    },
    // 机器型号
    terminalBrand(val) {
      this.modellist = [];
      this.$set(this.tarminal, "terminalModel", "");
      switch (val) {
        case "华智融":
          this.modellist = this.huazhirong;
          break;
        case "联迪":
          this.modellist = this.liandi;
          break;
        case "意锐":
          this.modellist = this.yirui;
          break;
        case "新大陆":
          this.modellist = this.xindalu;
          break;
        case "如意":
          this.modellist = this.ruyi;
          break;
        case "招财宝":
          this.modellist = this.zhaocaibao;
          break;
        case "青蛙":
          this.modellist = this.qingwa;
          break;
        case "新蜻蜓":
          this.modellist = this.xinqingting;
          break;
        case "高校团餐":
          this.modellist = this.gaoxiao;
          break;
      }
    },
    // 三绑定
    threebindingbtn(val) {
      this.threebinding = true;
      this.bingding3id = val.id;
      get3Bind({}, val.id).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.bindinginfo = res.data;
          this.aliMerchantType = res.data.aliMerchantType;
          this.batchNo = res.data.aliBatchNo;
        } else {
          this.bindinginfo = res.data;
          this.aliMerchantType = res.data.aliMerchantType;
          this.batchNo = res.data.aliBatchNo;
          this.$message.error(res.message);
        }
      });
    },
    // 确定绑定
    bingdingok() {
      config3Bind({
        id: this.bingding3id,
        ...this.bindinginfo,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "绑定成功",
            type: "success",
          });
          this.threebinding = false;
          this.merchantlist();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 代运营申请
    operationapply() {
      let that = this;
      if (this.operationapplybtn) {
        this.operationapplybtn = false;
        const loading = this.$loading({
          lock: true,
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        operationapply({
          merchantChannelId: this.bindinginfo.merchantChannelId,
          alipayAccount: this.bindinginfo.alipayAccount,
        }).then((res) => {
          if (res.code == 200) {
            this.batchNo = this.data;
            this.$message({
              message: "代申请成功",
              type: "success",
            });
            loading.close();
            setTimeout(function () {
              that.operationapplybtn = true;
            }, 10000);
          } else {
            this.$message.error(res.message);
            loading.close();
            that.operationapplybtn = true;
          }
        });
      } else {
        this.$message({
          message: "您操作过于频繁,请稍后再试",
          type: "warning",
        });
      }
    },
    // 同步运营操作结果
    operationresult() {
      if (this.operationresultbtn) {
        operationresult({
          merchantChannelId: this.bindinginfo.merchantChannelId,
          batchNo: this.batchNo,
        }).then((res) => {
          console.log(res);
        });
      } else {
        this.$message({
          message: "您操作过于频繁,请稍后再试",
          type: "warning",
        });
      }
    },
    // 3绑定关系校验
    check3Binds() {
      // console.log(this.bingding3id)
      check3Bind({}, this.bingding3id).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
        } else {
          this.$message.error(res.message);
        }
        get3Bind({}, this.bingding3id).then((res) => {
          // console.log(res)
          if (res.code == 200) {
            this.bindinginfo = res.data;
            this.aliMerchantType = res.data.aliMerchantType;
            this.batchNo = res.data.aliBatchNo;
          } else {
            this.bindinginfo = res.data;
            this.aliMerchantType = res.data.aliMerchantType;
            this.batchNo = res.data.aliBatchNo;
            this.$message.error(res.message);
          }
        });
      });
    },
  },
};
</script>
<style scoped lang='less'>
.iconmove {
  cursor: pointer;
}
.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.name {
  width: 25%;
}
.screeningBox {
  width: 100%;
  display: flex;
}
.leftBox,
.rightBox {
  width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}
.leftBox > .leftitem {
  margin-bottom: 15px;
}
.rightBox > .rightitem {
  margin-bottom: 15px;
}
.merchants {
  width: 50%;
}
.tableBox {
  margin-top: 20px;
}
.servicelevel {
  width: 20%;
}
.width20 {
  width: 20%;
}
.red {
  color: #f9607d;
}
.green {
  color: green;
}
.blue {
  color: #01aaef;
}
.stitle {
  padding: 5px 0;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  i {
    margin-left: 10px;
    margin-right: 5px;
  }
  .swarning {
    color: red;
  }
  .warning {
    color: #f9607d;
  }
}
.el-upload {
  height: 250px !important;
}
.el-autocomplete {
  width: 95%;
}
.servicelevels {
  width: 95%;
}
.code_img {
  float: right;
  width: 20px;
  height: 20px;
  // margin-left: 10px;
}
.gzh_ka {
  width: 400px;
  height: 550px;
  // background-color: pink;
  margin: 0 auto;
  position: relative;
  .box_warp {
    width: 331px;
    height: 451px;
    position: absolute;
    top: 30px;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .box {
    width: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.xcx_ka {
  width: 400px;
  height: 550px;
  // background-color: red;
  position: relative;
  margin: 0 auto;
  .box_xcxp {
    width: 331px;
    height: 451px;
    position: absolute;
    top: 30px;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .box1 {
    width: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.ka_btn {
  width: 140px;
  height: 35px;
  position: absolute;
  bottom: 10px;
  left: 50%;
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  // border: 2px red;
  // background-color: #fff;
  font-size: 16px;
  font-weight: 800;
  border-width: 2px;
  // color: #fe6a00;
  background: none;
  // border-color: #fe6a00;
}
// .sub2{}
.ka_btn:active {
  // background: #fe6a00;
  // border-color: #fe6a00;
  color: #fff;
}
#qrcode1 {
  position: absolute;
  top: 149px;
  left: 78px;
  z-index: 1;
  transform: scale(0.24);
  top: -125px;
  left: -196px;
}
#qrcode2 {
  position: absolute;
  top: 149px;
  left: 78px;
  z-index: 1;
  transform: scale(0.24);
  top: -125px;
  left: -196px;
}
.btnbox {
  width: 100%;
  text-align: center;
  margin-top: 20px;
  .btn {
    padding: 10px 25px;
  }
  .blue {
    background: rgb(95, 13, 226);
    color: #fff;
  }
}
</style>